import React, { useState } from 'react';
import styles from './index.less';
import spanleft from './img/spanleft.png';
import spanright from './img/spanright.png';
import { Radio } from 'antd';

export default function Title(props) {
  const [key, setKey] = useState('left');
  const { text, icon } = props;

  const handleModeChange = e => {
    const key = e.target.value;
    setKey(key);
  };

  return (
    <div className={styles.title}>
      <div className={styles.root}>
        <span className={styles.spanleft}>
          <img src={spanleft} />
        </span>
        <span className={styles.icon}>
          <img src={icon} />
        </span>
        <span className={styles.text}>{text}</span>
        {props.type === true ? (
          <span className={styles.tabs}>
            <Radio.Group
              onChange={handleModeChange}
              value={key}
              style={{ marginBottom: 8 }}
            >
              <Radio.Button value="left">锅炉</Radio.Button>
              <Radio.Button value="rignt">汽机</Radio.Button>
            </Radio.Group>
          </span>
        ) : null}
        <span className={styles.spanright}>
          <img src={spanright} />
        </span>
      </div>
    </div>
  );
}
